<template>
	<div class="setinfo">
		<header-com title="机构申请" moduleName="match"></header-com>
		<van-cell-group class="parent-cell">
			<van-cell title="机构名称" class='cell' required>
				<template slot="">
					<van-field class="input" v-model="user.name" placeholder="请输入" clearable input-align="right" />
				</template>
			</van-cell>
			<van-cell title="负责人姓名" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model="user.major" maxlength="5" placeholder="请输入" clearable input-align="right" />
				</template>
			</van-cell>
			<van-cell title="负责人联系方式" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model="user.major_phone" maxlength="11" placeholder="请输入" clearable input-align="right" />
				</template>
			</van-cell>
			<van-cell title="负责人联系邮箱" class='cell' required>
				<template slot="">
					<van-field class="short-input" v-model.trim="user.email" placeholder="请输入" clearable input-align="right" />
				</template>
			</van-cell>
			<van-cell title="机构简介" class='cell intro' required>
				<textarea class="textarea" v-model="user.info" rows="7" ></textarea>
			</van-cell>
			<!-- <textarea class="textarea" v-model="user.info" rows="7"></textarea> -->
			<van-cell title="机构logo" class='cell' required>
				<template slot="">
					<div class="logo">
						<img :src="user.logo" input-align="right">
						<input type="file" name="" v-on:change="change($event)" class="upload">
					</div>
				</template>
			</van-cell>
			<van-cell title="资质证明" class='cell' required>
				<template slot="">
					<div class="logo">
						<img :src="user.prove" input-align="right">
						<input type="file" name="" v-on:change="changeProve($event)" class="upload">
					</div>
				</template>
			</van-cell>
			<van-cell title="驳回理由" class='cell' v-if="status==2" required>
				<template slot="">
					<van-field class="short-input" v-model="user.rejected" input-align="right" disabled />
				</template>
			</van-cell>
		</van-cell-group>
		<div class="conform" :class="{'color':status===0}" @click="submit">
			<span v-if="status === 1">已通过</span>
			<span v-if="status === 2">提交</span>
			<span v-if="status === 0">审核中</span>
		</div>
  </div>
</template>
<script>
import { Uploader } from "vant";
import { Actionsheet } from "vant";
import { DatetimePicker } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      user: {
        name: "",
        major: "",
        major_phone: "",
        email: "",
        info: "",
        logo: require("@/assets/img/defult.png"),
        prove: require("@/assets/img/defult.png"),
        rejected: "",
        // paw:"",
        // repaw: '',
      },
      status: "",
      check: false,
    };
  },
  mounted() {
    this.com_setInfo();
  },
  methods: {
    com_setInfo() {
      this.$axios
        .get("mobile/v1/UserApply/getClubInfo", {
          headers: {
            token: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.status == 200) {
            if (res.data.data != null) {
              if (res.data.data.status == 1) {
                Toast("您已通过审核");
              }
              if (res.data.data.status == 2) {
                Toast("您的提交被驳回！");
              }
              this.status = res.data.data.status;
              this.user = res.data.data;
            } 
            else {
              this.status = 2;
            }
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    checked() {
      let flag = true;
      if (this.user.name == "" || this.user.name == null) {
        Toast("机构名称不能为空！");
        // this.check = false;
        return false;
      }
      if (this.user.major == "" || this.user.major == null) {
        Toast("负责人姓名不能为空！");
        // this.check = false;
        return false;
      }
      if (
        !/^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/.test(
          this.user.major_phone
        )
      ) {
        Toast("手机号码有误！");
        // this.check = false;
        return false;
      }
      if (
        !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
          this.user.email
        )
      ) {
        Toast("Email格式不正确！");
        // this.check = false;
        return false;
      }
      if (this.user.info == "" || this.user.info == null) {
        Toast("机构简介不能为空！");
        // this.check = false;
        return false;
      }
      if (this.user.logo == "" || this.user.logo == null) {
        Toast("机构logo不能为空！");
        // this.check = false;
        return false;
      }
      if (this.user.prove == "" || this.user.prove == null) {
        Toast("资质证明不能为空！");
        // this.check = false;
        return false;
      }
      return flag;
    },
    changeProve(e) {
      let img = e.target.files[0];
      let form = new FormData();
      form.append("file", img, img.name);
      this.$axios
        .post("/mobile/v1/event/img", form)
        .then((res) => {
          if (res.data.code == 200) {
            this.user.prove = res.data.data;
            Toast("上传成功");
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    change(e) {
      let img = e.target.files[0];
      let form = new FormData();
      form.append("file", img, img.name);
      this.$axios
        .post("/mobile/v1/event/img", form)
        .then((res) => {
          if (res.data.code == 200) {
            this.user.logo = res.data.data;
            Toast("上传图片成功");
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    submit() {
      if (this.status == 2 || this.status == null) {
        // this.checked();
        // if (this.check) {
        if (this.checked()) {
          let params = new URLSearchParams();
          params.append("name", this.user.name);
          params.append("major", this.user.major);
          params.append("major_phone", this.user.major_phone);
          params.append("email", this.user.email);
          params.append("info", this.user.info);
          params.append("logo", this.user.logo);
          params.append("prove", this.user.prove);
          // params.append('paw', this.user.paw);
          this.$axios
            .post("/mobile/v1/UserApply/doUserToClub", params, {
              headers: {
                token: window.sessionStorage.getItem("token"),
              },
            })
            .then((res) => {
              if (res.data.status == 200) {
                this.status = 0;
                this.$router.push({ path: "/mine" });
                Toast(res.data.message);
              } else {
                Toast(res.data.message);
              }
            })
            .catch((res) => {
              //  console.log(res.msg);
            });
        }
      }
      if (this.status === 0) {
        Toast("审核中");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.textarea {
  background: #f6f6f6;
  border: 1px solid #ebedf0;
  width: calc(100vw - 54px);
  padding: 10px 10px;
  resize: none;
  outline: none;
  margin: 0 auto;
}
.intro{
	display: flex;
	flex-direction: column;
}

.logo {
  img {
    display: inline-block;
    height: 100%;
    max-width: 1rem;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.upload {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  opacity: 0;
  height: 100%;
  width: 1rem;
}

// .van-icon {
// 	position: absolute;
// 	bottom: 0;
// 	right: 0;
// 	font-size: 18px;
// 	color: #fff;
// 	height: 0.6rem;
// 	width: 0.6rem;
// 	border-radius: 50%;
// 	background: #42B574;
// 	line-height: 0.6rem;
// }

.img_url {
  display: inline-block;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: none;
}

.van-uploader {
  height: 1.4rem;
  width: 1.4rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.van-uploader__input {
  border-radius: 50%;
  border: none;
  background: transparent;
}

.conform {
  /*// font-size: 0.4rem;*/
		font-weight: 700;
		width: 50%;
		margin: 0 auto;
		background: #42B572;
		color: #fff;
		margin-top: 0.4rem;
		padding: 0.2rem 0;
	}

	.color {
		background: #a5ada8;
	}

	.setinfo {
		margin-bottom: 1.1rem;
		padding-bottom: 1.1rem;
		background-color: #f6f6f6;
	}

	.pic-box {
		display: flex;
		justify-content: center;
		padding: 0.3rem 0.5rem;

		.pic {
			height: 1.4rem;
			width: 1.4rem;
			border: 0.04rem solid #42B574;
			border-radius: 50%;
			position: relative;

			input {
				border: none;
			}
		}
	}
.parent-cell{
	background-color: #f6f6f6;
}
	.cell {
		background-color: #f6f6f6;
		text-align: left;
	}

	.input {
		background: #f6f6f6;
		padding: 0;
		float: right;
		width: 2rem;
	}

	.short-input {
		background: #f6f6f6;
		padding: 0;
		float: right;
		/*width: 1rem;*/
}

.long-input {
  background: #f6f6f6;
  padding: 0;
  float: right;
  width: 3rem;
}
</style>
